<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" top="5vh" @close="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="模板名称：" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注：" prop="templateRemarks">
          <el-input v-model="form.templateRemarks" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="需求文件：" prop="templateFilePath">
          <el-upload ref="uploadRef" class="upload-demo" action="#" :limit="1" :on-change="handleChange" :auto-upload="false" :show-file-list="false"
            :on-exceed="handleExceed" :accept="accept">
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <div slot="tip" class="el-upload__tip"><span v-if="form.templateFileName">
                已上传：{{form.templateFileName}}
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="
          cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { uploadFileTemplate, updateTemplate } from '@/api/techTemplate.js'
export default {
  data() {
    return {
      dialogVisible: false,
      accept: '',
      title: '',
      form: {
        templateId: '',
        templateName: '',
        templateRemarks: '',
        templateFileName: '',
        templateFilePath: ''
      },
      rules: {
        templateName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        templateRemarks: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
        // templateFilePath: [
        //   { required: true, message: '不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  created() { },
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      if (obj.data) {
        this.form = JSON.parse(JSON.stringify(Object.assign(obj.data)))
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          // updateTemplate(this.form).then(() => {
          //   this.cancel()
          // })
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.$emit('close')
    },
    handleChange(file) {
      console.log(file)
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      // uploadFileTemplate(formData).then(res => {
      //   const _data = res.data || {}
      //   this.form.templateFileName = _data.fileName
      //   this.form.templateFilePath = _data.filePath
      // })
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles()
      this.handleChange(file[0])
    }
  }
}
</script>

<style lang="less" scoped>
</style>